<template>
  <view>
    <my-search-bar :searchValue='searchValue'></my-search-bar>
    <view>
      <!-- 轮播图 -->
      <swiper indicator-dots
              autoplay
              circular>
        <swiper-item v-for="item in swiperList"
                     :key="item.goods_id"
                     @click="toDetail(item.goods_id)">
          <img :src="item.image_src"
               alt="">
        </swiper-item>
      </swiper>
      <!-- 分类模块 -->
      <view class="nav-list">
        <image :src="item.image_src"
               alt=""
               v-for="item in categoryList"
               :key="item.name"
               class="nav-img"
               @click="switchToCategory(item.name)">
      </view>
      <!-- 楼层数据 -->
      <view v-for="item in floorList"
            :key="item.name"
            class="floor">
        <!-- 头部 -->
        <img :src="item.floor_title.image_src"
             alt=""
             class="floor-title">
        <!-- 左边 -->
        <!-- mode='widthFix'是uni-app中图片的模式 宽度不变,高度让图片自适应效果-----uni-app内置的 -->
        <view class="content">
          <navigator :url="item.product_list[0].navigator_url">
            <img :src="item.product_list[0].image_src"
                 mode='widthFix'
                 alt=""
                 :style="{width:item.product_list[0].image_width+'rpx'}"
                 class="left">
          </navigator>
          <!-- 右边 简单做法循环遍历product_list 把第一个图片元素隐藏起来  v-show>0判断index -->
          <view class="right">
            <navigator v-for="item1 in item.subList"
                       :key="item1.name"
                       :url="item1.navigator_url">
              <img mode='widthFix'
                   :src="item1.image_src"
                   alt=""
                   :style="{width:item1.image_width+'rpx'}"
                   class="" />
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import setTabBarBridge from '../../mixin/car-tabbar'
export default ({
  mixins: [setTabBarBridge],
  data () {
    return {
      swiperList: [],
      categoryList: [],
      floorList: [],
      searchValue: {
        text: '搜索',
        color: '#c00000'
      }
      // subList: []
    };
  },
  onLoad (options) {
    this.getSwiperList()
    this.getCategoryList()
    this.getFloorList()
    // 开启下拉刷新
    uni.startPullDownRefresh()
  },
  // 监听该页面用户下下拉刷新事件，与onLoad同级
  onPullDownRefresh () {
    console.log('结束下拉刷新');
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 2000);
  },
  methods: {
    // 处理获取楼层数据的navigation- url
    setFormote (message) {
      message.forEach(item => {
        console.log(item.product_list[0].navigator_url.split('/pages')[1]);
        item.product_list[0].navigator_url = '/subpckg/goods_list' + item.product_list[0].navigator_url.split('/page')[1]
        item.subList.forEach((item1, index1) => {
          item1.navigator_url = '/subpckg/goods_list' + item1.navigator_url.split('/page')[1]
        })
      })
    },
    // 点击轮播图跳转到详情页
    toDetail (id) {
      console.log(id);
      uni.navigateTo({
        url: `/subpckg/detail/index?id=${id}`
      })

    },
    async getSwiperList () {
      let { message, meta: { status } } = await uni.$request({
        url: 'home/swiperdata',
      })
      console.log(message);
      if (status == 200) {
        this.swiperList = message

      }
    },
    // 获取分类数据
    async getCategoryList () {
      let { message, meta: { status } } = await uni.$request({
        url: 'home/catitems'
      })
      if (status === 200) {
        this.categoryList = message
      }
    },
    // 获取楼层数据
    async getFloorList () {
      let { message, meta: { status } } = await uni.$request({
        url: 'home/floordata'
      })
      message.forEach(item => {
        // item.subList.push(item.product_list.splice(1))
        item.subList = item.product_list.splice(1)
      });
      console.log(message);
      // console.log(res);
      if (status == 200) {
        this.setFormote(message)
        this.floorList = message
        // this.subList = message.subList

      }

    },
    // 点击分类图片跳转到分类页面
    switchToCategory (name) {
      console.log(111);
      // 跳转页面栈不带文件名
      if (name !== '分类') {
        return
      }
      uni.switchTab({
        url: '../category/index'
      })
    }
  }

})
</script>
<style lang="scss" scoped>
swiper {
  height: 400rpx;

  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}

.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
.content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.left {
  flex: 1;
}
.right {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
}
.floor {
  padding-left: 20rpx;
}
</style>